<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
</head>
<body>
	
		
		
	<!--底部tab切换-->
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" data-href="music.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">音乐列表</span>
        </a>
        <a class="mui-tab-item" data-href="news.html">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">新闻列表</span>
        </a>
        <a class="mui-tab-item" data-href="login.html">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">个人中心</span>
        </a>
    </nav>
    
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
       mui.init();
       mui.plusReady(function() {  //使用此方法必须在手机上测试 才有效果
        	//先定义一个子页面数组
        	var subpages = ['music.html', 'news.html', 'login.html'];
        	
        	//得到当前页面的webview对象
        	var self = plus.webview.currentWebview();
        	
        	//分别创建这些子页面，就是创建webview
        	for (var i = 0; i < subpages.length; i++) {
        		var sub = plus.webview.create(subpages[i], subpages[i], {
        			top:"0",
    				bottom: '50px'
    			});
        		
        		if (i > 0) {  //默认显示音乐列表
    				sub.hide();
    			}
        		
        		//创建的子页面需要加到当前页面中去,此时3个页面都添加到了首页，第三个页面在最上面，因此选择隐藏页面
        		self.append(sub);
        	}
        	
        	//给底部选项卡绑定tab事件
        	var activeTab = subpages[0];	// 高亮的子页面
        	mui('.mui-bar-tab').on('tap', 'a', function() {
        		
    			var targetTab = this.getAttribute('data-href');
        		//如果当前点击的页面是当前页面，就不做下面的处理
        		if (targetTab == activeTab) {
    				return;
    			}
        		
        		plus.webview.show(targetTab);//点击时显示点击对应的页面
    			activeTab = targetTab;
        	})
        })
    </script>
</body>
</html>
